<template>
  <div>
    <van-nav-bar
      title="地图找房"
      left-text="返回"
      fixed
      left-arrow
      @click-left="$router.back()"
    />
    <div id="container"></div>
  </div>
</template>

<script>
import { getMapHours } from '@/api/map'
const BMapGL = window.BMapGL
export default {
  name: 'HoursMap',
  methods: {
    // 获取房源信息方法
    async getHours (value) {
      // 获取房源信息
      const { body } = await getMapHours(value)
      console.log(body)
      body.forEach(item => {
        this.renderCity(item)
      })
    },
    // 渲染覆盖物方法
    renderCity (item) {
      // 获取当前地图缩放级别
      const zoom = this.map.getZoom()
      // 解构出经纬度及城市
      const {
        coord: { longitude, latitude },
        label: area,
        count,
        value
      } = item
      // 文本标注所在地图位置
      const areaPoint = new BMapGL.Point(longitude, latitude)
      // 创建覆盖物
      const label = new BMapGL.Label('', {
        position: areaPoint, // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-35, -35) // 设置文本偏移量
      })
      // 设置房源覆盖物
      if (zoom <= 13) {
        label.setContent(`
            <div class='content'>
                <p class='header'>${area}</p>
                <p>${count}套</p>
            </div>
          `)
      } else {
        label.setContent(`
            <div class='cityqu'>
                <p class='city_header'>${area}</p>
                <p>${count}套</p>
                <div class="most"></div>
            </div>
          `)
      }
      // 自定义文本标注样式，清除默认样式
      label.setStyle({
        border: '0',
        backgroundColor: ''
      })
      // 给覆盖物添加id,需要发起下一次请求
      label.id = value
      // 给文本添加点击事件
      label.addEventListener('click', () => {
        if (zoom < 13) {
          // 放大当前城市地理位置所在的地图
          this.map.centerAndZoom(areaPoint, 13)
          // 清除覆盖物
          setTimeout(() => {
            this.map.clearOverlays()
          }, 0)
          // 获取房源信息
          this.getHours(label.id)
        } else if (zoom < 15) {
          // 放大当前城市地理位置所在的地图
          this.map.centerAndZoom(areaPoint, 15)
          // 清除覆盖物
          setTimeout(() => {
            this.map.clearOverlays()
          }, 0)
          // 获取房源信息
          this.getHours(label.id)
        }
        this.$toast.fail('不给你看房子')
      })
      // 将遮罩物渲染到地图上
      this.map.addOverlay(label)
    },
    // 地图方法
    showMap () {
      // 获取当前城市定位
      const { label, value } = JSON.parse(localStorage.getItem('hk-city'))
      console.log(label, value)
      // 创建地图实例
      const map = new BMapGL.Map('container')
      // 将地图挂到vue实例身上
      this.map = map
      // 创建地址解析器实例
      const myGeo = new BMapGL.Geocoder()
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(
        label,
        async point => {
          if (point) {
            // 初始化地图
            map.centerAndZoom(point, 11)
            // map.addOverlay(new BMapGL.Marker(point))
            // 引入地图控件
            map.addControl(new BMapGL.ScaleControl())
            map.addControl(new BMapGL.ZoomControl())
            map.addControl(new BMapGL.CityListControl())
            // 获取遮罩层
            this.getHours(value)
          }
        },
        label
      )
    }
  },
  mounted () {
    this.showMap()
  }
}
</script>

<style lang="less" scoped>
  #container {
    height: 94vh;
    margin-top: 6vh;
  }
  /deep/ .BMapLabel {
    border: 0;
  }
  /deep/ .cityqu {
    position: relative;
    width: 80px;
    height: 24px;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    padding: 0 4px 0 10px;
    border-radius: 4px;
    color: #fff;
    background-color: #23bb78;
    cursor: pointer;
  }
  /deep/ .most {
      position: absolute;
      bottom: -6px;
      left: 36px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #23bb78;
      font-size: 0;
      line-height: 0;
    }
  /deep/ .city_header {
    width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/ .content {
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #23bb78;
    color: #fff;
    cursor: pointer;
  }
  /deep/ .header {
    padding-bottom: 6px;
  }
</style>
